<template>
  <div>{{ d.num.toFixed(0) }}</div>
</template>

<script setup>
  import gsap from 'gsap'
  import { reactive, watch, onActivated } from 'vue'

  const props = defineProps({
    value: {
      type: Number,
      default: 0,
    },
  })

  const d = reactive({
    num: 0,
  })
  function AnimationToValue() {
    console.log('执行了')
    gsap.to(d, {
      duration: 0.5,
      num: props.value,
    })
  }

  AnimationToValue()

  watch(
    () => props.value,
    () => AnimationToValue()
  )

  onActivated(() => {
    d.num = 0
    AnimationToValue()
  })
</script>

<style scoped></style>
